*{
    margin:0;
    padding:0;
}
ul{
    position:absolute;
    margin-top:20px;
    margin-left:25px;
}
li{
    list-style:none;
}
.showBook{
     position: relative;
    width:67px;
    height:30px;
    float:left;
    margin-left:33px;
    box-shadow:0 0 8px 1px rgba(255,204,204,0.7);
    border-radius:17px;
    text-align:center;
    line-height:25px;
    cursor:pointer;
    color: #ffc;
    font-size: 14px;
}
.showBook:hover{
   animation:color 1s linear forwards;
   -webkit-animation:color 1s linear forwards;
   -moz-animation:color 1s linear forwards;/*
   -o-animation:color 1s linear forwards;*/
}
@keyframes color{
     0%{
        background:transparent;
        color:#ff9999;
        width:67px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
    }
    100%{
        background:gold;
        color:white;
        width:80px;
        height: 40px;
        line-height: 35px;
         border-radius: 60px 30px;
    }
}
/*@-o-keyframes color{
     0%{
        background:transparent;
        color:#ff9999;
        width:67px;
        height: 30px;
        line-height: 35px;
        border-radius: 17px;
    }
    100%{
        background:gold;
        color:white;
        width:80px;
        height: 40px;
        line-height: 50px;
         border-radius: 60px 30px;
    }
}*/
@-webkit-keyframes color{
     0%{
        background:transparent;
        color:#ff9999;
        width:67px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
    }
    100%{
        background:gold;
        color:white;
        width:80px;
        height: 40px;
        line-height: 35px;
         border-radius: 60px 30px;
    }
}
@-moz-keyframes color{
     0%{
        background:transparent;
        color:#ff9999;
        width:67px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
    }
    100%{
        background:gold;
        color:white;
        width:80px;
        height: 40px;
        line-height: 35px;
         border-radius: 60px 30px;
    }
}

#outWrap{
    position:relative;
    
    width:1024px;
    height:768px;
     background-image:url(../image/4.jpg);
    background-size: 100% 100%;
    -webkit-background-origin:conten-box;
    background-origin:conten-box;
}
#wrap{
    position:absolute;
    width:900px;
    height:550px;
    margin-top:110px;
    margin-left:55px;/**/
    box-shadow:0 0 5px 1px rgba(255,204,153,0.6);
    border-radius:70px;
}
#lineThrough{
    width:inherit;
    height:0px;
    /*background:maroon;*/
    box-shadow:0 0 1px 1px rgba(255,204,153,0.6);
    border-radius:15px 10px;
    margin-top:85px;
}
#outWrap>ul{
    width:1024px;
    height:768px;
    margin-left:0px;
    margin-top:0;
}
.imgLi{
    position:absolute;
    display:none;
}
#move{
    width: 700px;
    height: 520px;
    position: absolute;
    z-index:4000000000000000000000000000000;
}
#move ul{
     width: 680px;
    height: 520px;
    margin: 0 auto;
}
#move li{
    margin-top: 37px;
    width: 900px;
    height: 30px;
    cursor: pointer;
    color: #e6ff66;
}
.line{
    /*width: inherit;*/
    height: 1px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
     background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法 */
    font-size: 30px;
    
}
.leftline{
    margin-top: 15px;
    border-radius: 100%;
}
.leftline{
    animation:toLong 15s linear infinite alternate;
    -webkit-animation:toLong 15s linear  infinite alternate;
}
@keyframes toLong {
    0%{
        width:0px;
    }
    100%{
        width:480px;
    }
}
@-moz-keyframes toLong {
    0%{
        width:0px;
    }
    100%{
        width:480px;
    }
}
@-o-keyframes toLong {
    0%{
        width:0px;
    }
    100%{
        width:480px;
    }
}
@-webkit-keyframes toLong {
    0%{
        width:0px;
    }
    100%{
        width:480px;
    }
}


.through{
    float: left;
}
/*---------------------------book----------------------------*/
/* Internet Explorer 和 Opera 不支持 rotateX 方法。*/
#bookWrap{
    position:absolute;
    width:900px;
    height:550px;
    margin-left:-40px;
    margin-top: 20px;
    -webkit-perspective:2000px;
    -ms-perspective:2000px;
    perspective:2000px;
    font-family: '微软雅黑';
}
.book{
    
    position: relative;
    display:none;
    top: -9%;
    left: 55%;
    margin-top: 10px;
    width: 450px;
    height: 550px;
    background-color: #ffcccc;
    -webkit-transform: rotateX(0deg) rotateY(-20deg);
    -ms-transform: rotateX(0deg) rotateY(-20deg);
    -o-transform: rotateX(0deg) rotateY(-20deg);
    transform: rotateX(0deg) rotateY(-20deg);
   
}
#bookWrap{
    z-index: 100000000;
    position: absolute;
}
.book button{
    position: absolute;
    width:60px;
    height:20px;
    font-size: 12px;
    color: white;
    background: rgba(255,102,102,0.7);
    top: 520px;
    left: 380px;
}
.cBox{
    position: absolute;
    margin-top:-45px;
    margin-left: 10px;
    font-size: 18px;
    width: 420px;
    height: 500px;
    border-top: 1px solid grey;
    word-wrap:break-word;
    overflow: hidden;
}
.imgLi img{
    width: 1024px;
    height: 766px;
}
.bookHeader{
    position: absolute;
    margin-top:20px;
    margin-left: 150px;
    font-size: 30px;
    width: 150px;
    height: 50px;
    letter-spacing: 6px;
    word-wrap:break-word;
}
.pageHeader{
    position: absolute;
    margin-top:-90px;
    margin-left: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    width: 400px;
    height: 40px;
    box-shadow: 0 -2px 2px 2px rgba(102,51,102,0.4);
   
    word-wrap:break-word;
}
.preserve-3d {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.book-page {
    position: absolute;
    top: 0px;
    left: 0;
    width: 450px;
    height: 550px;
    /*box-shadow: 0 0 5px 2px white;*/
border-radius: 10px;
}
.book-page p{
    overflow: hidden;
}
.con1,.con2,.con3,.con5{
    letter-spacing: 10px;
    word-wrap:break-word;
}
.book-page-box {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

@keyframes flipBook1 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
  
}
/**/
/* Firefox */
@-moz-keyframes flipBook1 {
  0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
  
}
/**/
/* Safari and Chrome */
@-webkit-keyframes flipBook1 {
 0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-150deg);
        -ms-transform: rotateY(-150deg);
        -o-transform: rotateY(-150deg);
        transform: rotateY(-150deg);
    }
  
}



@keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-145deg);
        -ms-transform: rotateY(-145deg);
        -o-transform: rotateY(-145deg);
        transform: rotateY(-145deg);
    }
   
}

/* Firefox */
@-moz-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-145deg);
        -ms-transform: rotateY(-145deg);
        -o-transform: rotateY(-145deg);
        transform: rotateY(-145deg);
    }
   
    
}

/* Safari and Chrome */
@-webkit-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
   100% {
        -webkit-transform: rotateY(-145deg);
        -ms-transform: rotateY(-145deg);
        -o-transform: rotateY(-145deg);
        transform: rotateY(-145deg);
    }
   
}

/* Opera */
/*@-o-keyframes flipBook2 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
  100% {
        -webkit-transform: rotateY(-145deg);
        -ms-transform: rotateY(-145deg);
        -o-transform: rotateY(-145deg);
        transform: rotateY(-145deg);
    }
   
}*/

/**/
@keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
   100% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
}

/* Firefox*/ 
@-moz-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
   100% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
}

/* Safari and Chrome*/ 
@-webkit-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
   100% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
}

/* Opera */
/*@-o-keyframes flipBook3 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
   100% {
        -webkit-transform: rotateY(-140deg);
        -ms-transform: rotateY(-140deg);
        -o-transform: rotateY(-140deg);
        transform: rotateY(-140deg);
    }
}*/

/*书的封面*/
.book-page-1 .page-front {
    color: #f03;
    background-image:url(../image/00.jpg);
    background-size: 100% 100%;
    -webkit-background-origin:conten-box;
    background-origin:conten-box;
    font-weight: 400px;
    font-size: 40px;
}
/*.hidePage{
    
    background-color: green;
    width: 200px;
height: 200px;
position: absolute;
}*/
.hidePages{
    animation:flipHidePage 5s linear;
}
@keyframes flipHidePage{
    0%{
        color: white;
        transform: rotateY(50deg) forwards;
    }
    100%{
        color: red;
        transform: rotateY(180deg) forwards;
    }
}
.con1,.con2,.con3,.con4,.con5,.con6,{
    overflow: hidden;
}
.book-page-1 .con1{

}
.book-page-2 .page-front,.book-page-3 .page-front ,.book-page-5 .page-front,.book-page-6 .page-front   {
    color: #ff3333;
   /*-----------------------------------设置为金色系列渐变色----------------------------------*/
    background-image:url(../image/111.jpg);
    background-size: 100% 100%;
    -webkit-background-origin:conten-box;
    background-origin:conten-box;
}
.book-page-1 .page-back {
    background-color: #fff;
  
}
.book-page-1    .page-front p {
    font-size: 30px;
    margin-top: 100px;
}

/*
/*书的第二页*/
.book-page-2 .page-back, .book-page-2 .page-front {
    background-color: #fff;
}
.book-page-2 .page-front p {
    font-size: 30px;
    color: black;
    margin-top: 100px;
}

/*
/*书的第3页*/
.book-page-3 .page-back, .book-page-3 .page-front {
    background-color: #fff;
    
}
.book-page-3 .page-front p {
    font-size: 30px;
   color: black;
    margin-top: 100px;

}
/*
/*书的第4页*/
.book-page-4 .page-back, .book-page-4 .page-front {
    background-color: #fff;
}
.book-page-4 .page-front p {
    font-size: 30px;
   color: black;
    margin-top: 100px;
}
/*---5-----*/
.book-page-5 .page-front p {
    font-size: 30px;
    color: black;
    margin-top: 100px;
   
}
.book-page-5 .page-back, .book-page-5 .page-front {
    background-color: #fff;
}
.book-page-6 .page-back, .book-page-6 .page-front {
    background-color: #fff;
}
.book-page-6 .page-front p {
    font-size: 30px;
   color: black;
    margin-top: 100px;
}

@keyframes flipBook5 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-135deg);
        -ms-transform: rotateY(-135deg);
        -o-transform: rotateY(-135deg);
        transform: rotateY(-135deg);
    }
}/**/

/* Firefox*/ 
@-moz-keyframes flipBook5 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-135deg);
        -ms-transform: rotateY(-135deg);
        -o-transform: rotateY(-135deg);
        transform: rotateY(-135deg);
    }
}

/* Safari and Chrome */
@-webkit-keyframes flipBook5 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-135deg);
        -ms-transform: rotateY(-135deg);
        -o-transform: rotateY(-135deg);
        transform: rotateY(-135deg);
    }
}

/* Opera */
/*@-o-keyframes flipBook5 {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(-135deg);
        -ms-transform: rotateY(-135deg);
        -o-transform: rotateY(-135deg);
        transform: rotateY(-135deg);
    }
}
*/